<template>
  <div class="w usercenter">
    <div class="search-nav">
      <div class="search-nav-container w">
        <ul>
          <li>我的信息</li>
          </li>
        </ul>
      </div>
    </div>
    <div>
    </div>
    <div class="user-tabs">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本资料" name="userinfo">
          <el-form ref="form" :model="user" label-width="80px">
            <el-form-item label="用户名称" prop="username">
              <el-input disabled v-model="user.username" maxlength="30" />
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="user.phone" maxlength="11" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="user.email" maxlength="50" />
            </el-form-item>
            <el-form-item>
              <el-button type="danger" size="mini" @click="submit">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="resetPwd">
          <el-form ref="form" :model="passWord" :rules="rules" label-width="80px">
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input v-model="passWord.oldPassword" placeholder="请输入旧密码" type="password" show-password />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="passWord.newPassword" placeholder="请输入新密码" type="password" show-password />
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="passWord.confirmPassword" placeholder="请确认密码" type="password" show-password />
            </el-form-item>
            <el-form-item>
              <el-button type="danger" size="mini" @click="submitPassword">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { bind, updatePassWord } from "@/api/goods"
export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.passWord.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      activeTab: "userinfo",
      user: {
        email: '',
        phone: '',
        username: '',
        id: ''
      },
      passWord: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      },
      // 表单校验
      rules: {
        oldPassword: [
          { required: true, message: "旧密码不能为空", trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ]
      }
    }
  },

  created() {
    this.user.email = this.$store.state.dianUser.email
    this.user.phone = this.$store.state.dianUser.phone
    this.user.username = this.$store.state.dianUser.dianName
    this.user.id = this.$store.state.dianUser.dianUserId
  },

  methods: {
    submit() {
      bind(this.user).then(res => {
        if (res.code == 200) {
          this.$modal.msgSuccess("更新用户信息成功");
          this.$store.dispatch('setPhone', this.user.phone)
          this.$store.dispatch('setEmail', this.user.email)
        }
      })
    },
    submitPassword() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updatePassWord(this.passWord).then(res => {
            if (res.code == 200) {
              this.$modal.msgSuccess('更新用户密码成功,请重新登录')
              this.$store.dispatch('DianLogOut').then(() => {
                this.$router.push({ path: '/' }).catch(() => { });
              })
            }
          })
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.usercenter {
  height: calc(100% - 162px);
}
  .user-tabs ::v-deep {
    .el-tabs__item.is-active {
      color: #c86147;
    }

    .el-tabs__active-bar {
      background-color: #c86147;
    }
  }
</style>